<script>
import {defineComponent} from 'vue'
import store from "@/stores/store";
import top from '../../components/common/nav-head.vue'
import bottom from '../../components/common/bottom.vue'
import { mapMutations } from 'vuex';

import axios from "axios";
export default defineComponent({
  name: "main-show",
  components:{
    top,
    bottom
  },
  computed:{
    account(){
      return store.getters.getAccount
    }
  },
  data(){
    return{
      store,
      product:'',
      image:'',
      cartList:this.$store.getters['getcartList']
    }
  },
  created(){
    const promise=this.getProduct_axios(this.$route.query.productId);
    promise
    .then(
        response => {
            this.product=response.data.data.product
            this.image=response.data.data.photo
            console.log(this.image)
        }
    )
    .catch((error)=>{
        console.error('异常',error)
    })
  },
  methods:{
   returnProductList(){
    this.$router.push({name:'product',query:{category:this.product.categoryName}});
   },
   getProduct_axios(productId){
    return axios({
		url:'http://localhost:8080/getProduct',
		method:'POST',
		//withCredentials: true,
		params:{
		    productId:productId
		}
	})
   },
   toMain(){
    this.$router.push({name:'main'});
   },
   ...mapMutations(['setcartList']),
   add(product){
    var contain=false
    for(var i=0;i<this.cartList.length;i++){
      if(this.cartList[i].Item_Id==product.productId){
        contain=true
        break
      }
    }
    if(contain){
      alert('This product is already in your cart!')
    }
    else{
      var item={
        id : this.cartList.length+1, 
        Item_Picture : this.image, 
        Item_Id : product.productId, 
        Description : product.categoryName, 
        Price : product.price, 
        Count : 1
      }
      this.cartList.push(item)
      this.$store.commit('setcartList', this.cartList);
      this.$router.push({name:'carts'})
    }

   }
  }
})
</script>
<template>
<div class="crumb">
  <div class="w">
    <div class="crumb-content">
      <a href="#" class="link" @click="toMain">MyStore</a>
      <span>></span>
      <span class="link-text">Product Details</span>
    </div>
  </div>
</div>

<div class="w panel">
  <div id="BackLink">
    <a href="#" style="text-align: center" @click="returnProductList()">Return to {{ product.categoryName }}</a>
  </div>

  <div class="container">
      <div class="card">
        <div class="content">
          <div><img :src="'data:image/png;base64,'+image"/></div>
          <h3>{{ product.name }}</h3>
          <h5>{{ product.productId }}</h5>
          <label><b>{{ product.categoryName }}</b></label>
          <label>{{ product.description }}</label>
          <div v-if="product.quantity">
            <div>{{ product.quantity }} in stock.</div>
            <div>{{ product.Price }}</div>
          </div>

          <div v-else>
            Back ordered.
          </div>
          <a href="#" class="Button" @click="add(product)">Add to Cart</a>
      </div>
  </div>
</div>
</div>
</template>

<style scoped>
@import "@/assets/MainPage/css/Main.css";
@import "@/assets/MainPage/css/cart.css";
@import "@/assets/MainPage/css/signOn.css";
</style>